<template>
    <div id="orders" class="box">
        <table class="table">
            <thead>
                <th>编号</th>
                <th>商品名称</th>
                <th>数量</th>
                <th>单价</th>
                <th>订单状态</th>
                <th>创建时间</th>
                <th>支付时间</th>
            </thead>
            <tbody>
                <tr v-for="orderItem in transformOrderItems" v-bind:key="orderItem.id">
                    <td>{{ orderItem.id }}</td>
                    <td>{{ orderItem.goodsName }}</td>
                    <td>{{ orderItem.goodsCount }}</td>
                    <td>{{ orderItem.goodsPrice }}</td>
                    <td>{{ orderItem.status }}</td>
                    <td>{{ orderItem.createDate }}</td>
                    <td>{{ orderItem.payDate }}</td>
                    <td><button class="button is-primary" v-on:click="payOrder(orderItem)">付款</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
    name: 'OrderList',
    computed: {
        ...mapGetters([
            'orderItems'
        ]),
        transformOrderItems() {
            return this.orderItems.map(orderItem => {
                var oldStatus = orderItem.status;
                var newStatus = 'UNKNOWN';
                if (oldStatus == 0) newStatus = '未支付';
                if (oldStatus == 1) newStatus = '已支付';
                if (oldStatus == 2) newStatus = '已发货';
                if (oldStatus == 3) newStatus = '已收货';
                if (oldStatus == 4) newStatus = '已退款';
                if (oldStatus == 5) newStatus = '已取消';
                orderItem.status = newStatus;
                return orderItem;
            })
        }
    },
    methods: {
        payOrder(orderItem) {
            this.$store.dispatch('payOrder', orderItem);
            this.$store.dispatch('getOrderItems');
        }
    }
}
</script>

<style scoped>

</style>